<template>
      <div >
        <!-- 上方标题栏 -->
        <!-- <div class="top">
          <yd-flexbox>
            <yd-flexbox-item class="text-center">
              <div v-if="show2 == true" style="text-align:center" @click="del">
                <hd-svg-icon name="hd-yduishanchu" slot="left" size="20px" color="#000"></hd-svg-icon>
              </div>
            </yd-flexbox-item>
            <yd-flexbox-item class="text-center" >我的投诉</yd-flexbox-item>
            <yd-flexbox-item class="text-right" @click.native="show2 = !show2">
               <span class="edit">编辑</span>
            </yd-flexbox-item>
        </yd-flexbox>
        </div> -->
        <!-- 上方选项卡 -->
        <yd-tab :callback="load">
          <yd-tab-panel label="未处理"  active >
                    <!-- 滚动刷新 -->
              <!-- <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>        -->
                <div class="main-body" v-for="(item,index) in list" :key="item.index"  @touchstart="showDeleteButton" @touchend="clearLoop">        
                    <div class="checkdiv" v-if="show2 == true">
                      <yd-checkbox-group v-model="checkbox">
                        <yd-checkbox :val="JSON.stringify(item)" shape="circle">&nbsp;</yd-checkbox>
                      </yd-checkbox-group>
                    </div>   
                    <div class="left-body">
                      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512536240530&di=6eff02cca1fdb69ff66968f88040d1c9&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201303%2F07%2F20130307021639_mCM5W.jpeg" class="right-body-img" alt="">
                    </div>
                    <!-- 点击图片右侧跳转 -->
                    <router-link :to="{path:'complaintInfo',query: {id:item.id,state:item.state}}">
                      <div class="right-body">
                        <p style="font-size:.35rem;padding-top:10px" >{{item.source_name}}</p>
                        <p style="padding-top:45px;">
                          <span style="font-size:10px;color:gray">{{item.create_time}}</span>    
                        </p> 
                      </div>
                    </router-link>
                </div>          
            <!-- </yd-infinitescroll>    -->
          </yd-tab-panel>
          <yd-tab-panel label="已处理">
                    <!-- 滚动刷新 -->
              <!-- <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>        -->
                <div class="main-body" v-for="(item,index) in list" :key="item.index"  @touchstart="showDeleteButton" @touchend="clearLoop">        
                    <div class="checkdiv" v-if="show2 == true">
                      <yd-checkbox-group v-model="checkbox">
                        <yd-checkbox :val="JSON.stringify(item)" shape="circle">&nbsp;</yd-checkbox>
                      </yd-checkbox-group>
                    </div>   
                    <div class="left-body">
                      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512536240530&di=6eff02cca1fdb69ff66968f88040d1c9&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201303%2F07%2F20130307021639_mCM5W.jpeg" class="right-body-img" alt="">
                    </div>
                    <!-- 点击图片右侧跳转 -->
                    <router-link :to="{path:'complaintInfo',query: {id:item.id,state:item.state}}">
                      <div class="right-body">
                        <p style="font-size:.35rem;padding-top:10px" >{{item.source_name}}</p>
                        <p style="padding-top:45px;">
                          <span style="font-size:10px;color:gray">{{item.create_time}}</span>    
                        </p> 
                      </div>
                    </router-link>
                </div>          
            <!-- </yd-infinitescroll>                -->
          </yd-tab-panel>
        </yd-tab>

    </div>
</template>
<script>
export default {
  name: 'myComplaint',
  data() {
    return {
      list: [],
      list2: [],
      pageNo: 1,
      pageSize: 6,
      show2: false,
      checkbox: [],
      canshu: this.$route.query.canshu,
      delList: [],
      state: '0'
    }
  },
  mounted: function() {
    this.load(this.canshu);
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.findComplaintList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          state: this.state
        },
        success: (resultData) => {
          if (this.state === '0') {
            this.state = '1'
          } else {
            this.state = '0'
          }
          this.list = resultData.data.results;
          console.log(this.list);
          console.log('!@#$@#$#$');
        }
      });
    },
    del() {
      this.$dialog.confirm({
        title: '删除',
        mes: '确定要删除已选中内容？！',
        opts: [
          {
            txt: '取消',
            color: false,
            callback: () => {
              return;
            }
          },
          {
            txt: '确定',
            color: 'true',
            callback: () => {
              console.log(this.checkbox);
              this.checkbox.forEach((item) => {
                console.log(JSON.parse(item).id);
                this.delList.push({id: JSON.parse(item).id});
              });
              console.log(this.delList);
              this.hdAjax({
                url: this.API.updateComplaint,
                data: {
                  list: this.delList
                },
                method: 'post',
                success: (resultData) => {
                  // this.$dialog.toast({mes: '已删除', timeout: 1000});
                  // this.$router.push({path: 'myCollection', query: {canshu: this.canshu}});
                  location.reload();
                }
              });
            }
          }
        ]
      });
    },
    showDeleteButton() {
      clearInterval(this.Loop);// 再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(function() {
        this.isDeleting = true;
      }, 1000);
    },
    clearLoop() {
      clearInterval(this.Loop);
    },
    change() {
      console.log(this.checkbox);
    }
  }
}
</script>

<style>
.text-center{
text-align: center
}
.text-right{
text-align: right
}
.checkdiv{
float:left;
height:100%;
line-height:60px;
margin-left:0px
}
.top{
  height:50px;
  width:100%;
  text-align:center; 
  line-height:50px;
  font-size:20px;
  background-color:white;
  border-bottom:1px solid #F0F0F0;
}
.main-body{
  width:100%;
  height:100px;
  margin-top:10px;
  margin-bottom: 10px;
  background-color: white
}
.right-body{
  margin-left:15px; 
  height:100%;
  float:left;
}
.left-body{
  width:100px;
  height:100px;
  float:left;
}
.right-body-img{
  width:100%;
  height:100%;
}
.edit{
  margin-right:10px;
  font-size:15px;
  color:blue
}

</style>

